<script setup lang="ts">
import useUserInfoStore from '@/stores/userInfo'
import useDarkModeStore from '@/stores/darkMode'
import useTokenStore from '@/stores/token'
import { onShow } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import { logoutAPI } from '@/api/user'
import { Role, Status } from '@/types/constants'
import { switchTabBarTheme } from '@/utils/common'

const tokenStore = useTokenStore()
const userInfo = reactive({
  avatar: '/static/images/avatar.png',
  nickname: '登录 / 注册',
  role: Status.NOT_LOGIN
})
onShow(() => {
  switchTabBarTheme()
  const userInfoStore = useUserInfoStore()
  const info = userInfoStore.userInfo
  if (info !== null) {
    if (info.avatar !== null && info.avatar !== '') userInfo.avatar = info.avatar
    userInfo.nickname = info.nickname
    userInfo.role = info.role === Role.PASSENGER ? Status.PASSENGER : Status.DRIVER
  }
  if (userInfo.role === Status.DRIVER) {
    infoTypes[2].text = '奖励中心'
    infoTypes[2].src = 'rewardCenter.png'
  }
})

const orderTypes = [
  { type: 1, text: '待付款', src: 'payment.png' },
  { type: 2, text: '已完成', src: 'finish.png' },
  { type: 3, text: '已取消', src: 'cancel.png' }
]
const infoTypes = [
  { type: 0, text: '个人信息', src: 'userInfo.png' },
  { type: 1, text: '钱包', src: 'wallet.png' },
  { type: 2, text: '优惠券', src: 'coupon.png' },
  { type: 3, text: '设置', src: 'set.png' },
]
const isLogin = () => {
  if (userInfo.role === Status.NOT_LOGIN) uni.navigateTo({ url: '/pages/login/index' })
}
const allOrder = () => {
  isLogin()
}
const selectOrder = (type: number) => {
  isLogin()
}
const selectInfo = (type: number) => {
  isLogin()
  if (type === 0) uni.navigateTo({ url: '/pages/my/userInfo/index' })
  else if (type === 1) uni.navigateTo({ url: '/pages/my/wallet/index' })
  else if (type === 2) {
    if (userInfo.role === Status.PASSENGER) uni.navigateTo({ url: '/pages/my/couponAndReward/coupon' })
    else uni.navigateTo({ url: '/pages/my/couponAndReward/reward' })
  }
  else uni.navigateTo({ url: '/pages/my/set/index' })
}
const logout = () => {
  logoutAPI()
  tokenStore.clearToken()
  uni.navigateTo({ url: '/pages/login/index' })
  setTimeout(() => {
    const { setDark } = useDarkModeStore()
    setDark(false)
  }, 500)
}
</script>

<template>
  <view class="head">
    <image style="width: 100%; height: 100%" src="@/static/images/head.png" />
    <view class="user">
      <view class="avatar-out">
        <wd-img custom-image="avatar-in" round :src="userInfo.avatar" />
      </view>
      <wd-text
        @click="isLogin"
        custom-style="margin-left: 40rpx;" size="40rpx"
        :text="userInfo.nickname"
        color="#fff" :lines="1"
      />
    </view>
  </view>
  <view class="content">
    <view class="order">
      <view class="order-text">
        <view style="font-weight: bold;">我的订单</view>
        <view @click="allOrder">
          <wd-text text="全部 " size="28rpx" />
          <wd-icon name="arrow-right" size="28rpx" color="#909399" />
        </view>
      </view>
      <view class="order-item">
        <view v-for="item in orderTypes" class="item" @click="selectOrder(item.type)">
          <image style="width: 80rpx; height: 80rpx;" :src="'/static/images/' + item.src" />
          <view style="margin-top: 10rpx; font-size: 30rpx;">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <view class="info">
      <view v-for="item in infoTypes" @click="selectInfo(item.type)" class="info-item">
        <view style="display: flex; align-items: center;">
          <image style="width: 46rpx; height: 46rpx;" :src="'/static/images/' + item.src"></image>
          <view style="margin-left: 22rpx">{{ item.text }}</view>
        </view>
        <wd-icon name="arrow-right" size="46rpx" color="#909399" />
      </view>
    </view>
  </view>
  <view class="footer">
     <wd-button
       v-if="userInfo.role !== Status.NOT_LOGIN"
       @click="logout"
       custom-style="background-color: #2796f2;"
       block size="large"
     >
       退出登录
     </wd-button>
  </view>
</template>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 400rpx;
  .user {
    position: fixed;
    top: 50rpx;
    width: 90%;
    height: 250rpx;
    margin: 0 auto;
    display: flex;
    justify-content: left;
    align-items: center;
    .avatar-out {
      margin-left: 60rpx;
      width: 130rpx;
      height: 130rpx; 
      border-radius: 50%;
      background-color: var(--front-color);
      display: flex;
      justify-content: center;
      align-items: center;
      :deep(.avatar-in) {
        width: 118rpx;
        height: 118rpx;
      }
    }
  }
}
.content {
  width: 90%;
  height: 700rpx;
  position: relative;
  top: -100rpx;
  margin: 0 auto;
  border-radius: 30rpx;
  font-size: 32rpx;
  .order {
    width: 90%;
    padding: 25rpx 5%;
    height: 200rpx;
    border-radius: 30rpx;
    background-color: var(--front-color);
    display: flex;
    flex-direction: column;
    .order-text {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    .order-item {
      flex: 4;
      margin-top: 25rpx;
      display: flex;
      justify-content: space-around;
      .item {
        width: 133rpx;
        height: 133rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .info {
    width: 100%;
    padding: 10rpx 0;
    height: 400rpx;
    margin-top: 30rpx;
    background-color: var(--front-color);
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    .info-item {
      width: 90%;
      padding: 0 5%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .info-item:nth-child(-n + 3) {
      border-bottom: #e5e5e5 1px solid;
    }
  }
}
.footer {
  width: 90%;
  margin-left: 5%;
  position: fixed;
}
</style>
